Vue中使用getElementById结果返回元素为null ? | 您所在的位置:网站首页 › vue3 mounted获取dom › Vue中使用getElementById结果返回元素为null ? |
【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ?
文章目录
【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ?在created()中使用getElementByIdmounted()中使用getElementByIdcreated()中结合this.$nextTick()实现业务需求总结
首先,我在项目中用这样一个需求,根据客户端屏幕尺寸动态计算主体区域的高度。
拿到这个需求,我第一想法是通过element.getBoundingClientRect获取固定元素的尺寸,然后通过document.body.offsetHeight获取可视区域的高度,最终动态计算主体区域的大小。 在created()中使用getElementById确定思路之后便开始动手coding,于是我在created中写了如下代码: //此处省去无关代码 created() { let serachBox = document.getElementById('searchBox'); let searchRect = serachBox .getBoundingClientRect(); console.log('rect',searchRect ); let dffsetHeight = document.body.offsetHeight; this.tHeight = ( dffsetHeight - searchRect .bottom - 100 ); }, 结果控制台直接报错了,报错如下 仔细一看原来是我将getElementById用在了created()钩子函数中,这时Vue尚未完成挂载,也就不能通过getElementById获取Dom元素,故而控制台打印null。找到原因之后我将上述代码迁移到mounted()钩子函数中,这时控制台打印出正确结果。 最终created()中结合this.$nextTick()实现业务需求最终代码如下: created() { this.$nextTick(function () { let serachBox = document.getElementById('searchBox'); let searchRect = serachBox .getBoundingClientRect(); console.log('rect',searchRect ); let dffsetHeight = document.body.offsetHeight; this.tHeight = ( dffsetHeight - searchRect .bottom - 100 ); }) }, 总结本次bug主要是两个方面导致。 一是习惯性的在created钩子函数中处理业务逻辑二主要还是对Vue的生命周期不够熟悉,犯了迷糊。 对Vue生命周期还不熟悉的同学请点此传送:Vue生命周期图示 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |